<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="Bingo-tags" prefix="b" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<b:initialHead />
</head>
<body>
   <div id="button-tools">
       <button id="button">菜单</button>
   </div>
   <div id="menu" style="width: 200px">
   </div>
   
</body>
<script type="text/javascript">
$(function(){
	var config = {
		    "className" : "text",
		    "id" : "text",
		    "parent" : "menu",
		    "title" : "menu",
		    "button" : "button"
		}
	var url = "sys/menu.query";
	createMenu(url,config);
	function createMenu(url,config){
		$.post(url,callback,"JSON");
	    function callback(result){
	    	var ul = document.createElement("ul");
	    	var $ul = $(ul);
	    	$ul.addClass(config.className);
			$ul.addClass("sidebar-nav");
			$ul.attr('id', config.id);
			
			var html = "";
			var menu1 = [];
			var menu2 = [];
				
			$.each(result.datas,function(i,item){
				if(item.pid =='' ){//填充一级菜单
					menu1.push(item);return true;
				}else{
					menu2.push(item);return true;
				}
			});
			//构建左菜单
			html += "<li class='sidebar-nav-heading' ><span class='sidebar-nav-heading-info' >" + config.title + "</span></li>";
	        
			$.each(menu1,function(i,item){//填充一级菜单				
			    html += "<li class='sidebar-nav-link' >";	
			    html += "<a href='javascript:;' class='sidebar-nav-sub-title'>"
	                      + item.text 
	                      + "<span class='am-icon-chevron-down am-fr am-margin-right-sm sidebar-nav-sub-ico'></span></a>";
				$.each(menu2,function(j,item1){//遍历取出二级菜单
					if(j==0){
						html += "<ul class='sidebar-nav sidebar-nav-sub'>";
					}
		            if(item1.pid == item.id){//二级左菜单字符
		                html += "<li class='sidebar-nav-link " + item1.id + "'><a href='" + item1.url + "'><span class='am-icon-angle-right sidebar-nav-link-logo'></span>" + item1.text + "</a></li>";
		            }
				});	
				html += "</ul>";
				html += "</li>";
	        });
	        $ul.append(html);
		    $("#menu").append($ul);
		    $("#button").on('click',function(){
				$(".sidebar-nav").toggle("normal");
		    });
	
			if($(window).width() < 1024){
				$(".sidebar-nav").toggle("normal");
			}
				
			// 侧边菜单
			$('.sidebar-nav-sub-title').on('click', function() {
			    $(this).siblings('.sidebar-nav-sub').slideToggle(80)
			        .end()
			        .find('.sidebar-nav-sub-ico').toggleClass('sidebar-nav-sub-ico-rotate');
			})
		}//callback
	}//createMenu
});
</script>
<style type="text/css">
		.sidebar-nav {
		  list-style-type: none;
		  padding: 0;
		  margin: 0;
		}
		.sidebar-nav-sub {
		  display: none;
		}
		.sidebar-nav-sub .sidebar-nav-link {
		  font-size: 12px;
		  padding-left: 30px;
		}
		.sidebar-nav-sub .sidebar-nav-link a {
		  font-size: 12px;
		  padding-left: 0;
		}
		.sidebar-nav-sub .sidebar-nav-link-logo {
		  margin-right: 8px;
		  width: 20px;
		  font-size: 16px;
		}
		.sidebar-nav-sub-ico-rotate {
		  -webkit-transform: rotate(180deg);
		  transform: rotate(180deg);
		  -webkit-transition: all 300ms;
		  transition: all 300ms;
		}
		.sidebar-nav-link-logo-ico {
		  margin-top: 5px;
		}
		.sidebar-nav-heading {
		  padding: 24px 17px;
		  font-size: 15px;
		  font-weight: 500;
		}
		.sidebar-nav-heading-info {
		  font-size: 12px;
		  color: #868E8E;
		  padding-left: 10px;
		}
		.sidebar-nav-link-logo {
		  margin-right: 8px;
		  width: 20px;
		  font-size: 16px;
		}
		.sidebar-nav-link {
		  color: #fff;
		}
		.sidebar-nav-link a {
		  display: block;
		  color: #868E8E;
		  padding: 10px 17px;
		  border-left: #282d2f 3px solid;
		  font-size: 14px;
		  cursor: pointer;
		}
		.sidebar-nav-link a.active {
		  cursor: pointer;
		  border-left: #1CA2CE 3px solid;
		  color: #fff;
		}
		.sidebar-nav-link a:hover {
		  color: #fff;
		}
</style>
</html>